<template>
  <div class="login-container">
    <div class="login-box">
      <h1>管理员登录</h1>
      <el-form
        :model="form"
        @submit.native.prevent="handleAdminLogin"
        class="login-form"
      >
        <el-form-item label="管理员账户名">
          <el-input
            v-model="form.adminUsername"
            placeholder="请输入管理员账户名"
            required
            prefix-icon="el-icon-user"
            class="input-field"
          />
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.adminPassword"
            type="password"
            placeholder="请输入密码"
            required
            prefix-icon="el-icon-lock"
            class="input-field"
          />
        </el-form-item>
        <el-button
          type="primary"
          native-type="submit"
          :loading="loading"
          class="login-button"
        >
          登录
        </el-button>
      </el-form>
      <el-button
        type="text"
        @click="$router.push({ name: 'UserLogin' })"
        class="user-login-button"
      >
        用户登录
      </el-button>
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "AdminLogin",
  data() {
    return {
      form: {
        adminUsername: "",
        adminPassword: "",
      },
      loading: false,
      errorMessage: "",
    };
  },
  methods: {
    ...mapActions({
      adminLogin: "admin/ADMIN_USER_LOGIN",
    }),
    handleAdminLogin() {
      this.loading = true; // 开始加载状态
      // this.errorMessage = ""; // 清空之前的错误信息
      const formDate = {
        username: this.form.adminUsername,
        password: this.form.adminPassword,
      };
      this.adminLogin(formDate)
        .then((res) => {
          this.$message.success("欢迎回来！"+res.data.nickname);
          this.$router.push({ name: "Admin" });
        })
        .catch((err) => {
          console.log("异常", err.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: #fff;
}

.login-box {
  background: rgba(255, 255, 255, 0.9);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: center;
}

.login-box h1 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-form .el-form-item {
  width: 100%;
  margin-bottom: 15px;
}

.input-field {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  border-color: #4facfe;
}

.login-button {
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 5px;
  padding: 10px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.login-button:hover {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
}

.user-login-button {
  margin-top: 10px;
  text-align: center;
  color: #4facfe;
  cursor: pointer;
}

.user-login-button:hover {
  text-decoration: underline;
}

.error-message {
  color: red;
  margin-top: 10px;
  text-align: center;
}
</style>